import { useEffect } from 'react';
import styles from './index.module.less';
import { EchartsPie } from './pie';

export const SecondActive = (props) => {
  console.log(props);

  useEffect(() => {}, []);

  const dealerList = ['二级经销商名称1', '二级经销商名称2', '二级经销商名称3'];

  return (
    <div className={styles.productStr}>
      <div className={styles.title}>管理项执行</div>
      <div className={styles.secondBatch}>
        <div className={styles.secondBatchL}>
          <div className={styles.secondBatchT}>
            二批
            <br />
            活跃度
          </div>
          <div className={styles.secondBatchB}>
            未下单
            <br />
            二批明细
          </div>
        </div>
        <div className={styles.secondBatchR}>
          <div className={styles.structure}>
            <EchartsPie width={'25%'} name={'全量二批活跃'} />
            <EchartsPie width={'25%'} name={'签约二批活跃'} />
            <EchartsPie width={'25%'} name={'特约二批活跃'} />
            <EchartsPie width={'25%'} name={'非特约二批活跃'} />
          </div>
          <div className={styles.structure}>
            <div className={styles.dealer}>
              {dealerList.map((item) => {
                return <div className={styles.name}>{item}</div>;
              })}
            </div>
            <div className={styles.dealer}>
              {dealerList.map((item) => {
                return <div className={styles.name}>{item}</div>;
              })}
            </div>
            <div className={styles.dealer}>
              {dealerList.map((item) => {
                return <div className={styles.name}>{item}</div>;
              })}
            </div>
            <div className={styles.dealer}>
              {dealerList.map((item) => {
                return <div className={styles.name}>{item}</div>;
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
